﻿@model billtracker.Models.bill
@using (Html.BeginForm())
{
   
        @Html.ValidationSummary(true)
    <div class="modal-header">
              <a class="close" data-dismiss="modal" onclick="hideMe();">×</a>
              <h3><i class="icon-pencil icon-black"></i> Edit Bill</h3>
            </div>
     <div class="modal-body">

        @Html.HiddenFor(model => model.billId)
        <div class="editor-label">
            @Html.LabelFor(model => model.name, "Name")
        </div>
        <div class="editor-field">
            @Html.TextBoxFor(model => model.name, new { @class = "required", label = "#spanReqName" })
            <span id="spanReqName" class="field-validation-error"></span> 
            @Html.ValidationMessageFor(model => model.name)
        </div>

        <div class="editor-label">
            @Html.LabelFor(model => model.amount, "Amount")
        </div>
        <div class="editor-field">
            @Html.TextBoxFor(model => model.amount)
             <span id="spanReqAmount" class="field-validation-error"></span>
            @Html.ValidationMessageFor(model => model.amount)
        </div>

         <div class="editor-label">
            @Html.LabelFor(model => model.frequencyId, "Frequency")
        </div>
        <div class="editor-field">
            @Html.DropDownList("frequencyId")
            @Html.ValidationMessageFor(model => model.frequencyId)
        </div>     
    </div> 
}
<div class="modal-footer">
              <input id="save" type="submit" value="Save changes" onclick="doPost();" class="btn btn-primary" />
            <input type="submit" value="Close" onclick="hideMe();" class="btn"  />
            </div> 
<script type="text/javascript">
    $(".required").focusout(function () {
        var val = $(this).val();
        var lblName = $(this).attr('label');
        if (!val.length) {
            //EMPTY STRING
            var errorMSg = $(this).attr('data-val-required')
            $(lblName).html(errorMSg);
            $(this).css("background-color", "#F8DBDB");
            $(this).css("border-color", "red");
        } else {
            $(this).css("background-color", "White");
            $(this).css("border-color", "#CCC");
            $(lblName).html("");
        }
    }).blur(function () {
    });
</script>

<script type="text/javascript">
    var currentBillName = "";
    function doPost() {
       
       var url = '@Url.Action("UpdateBill", "Bills")';
        $.post(url, $('form').serialize(), function (data) {
            if (data == false) {
                //INVALID FORM OR ERROR
                validateMe();
            }
            else {
                currentBillName = $("#name").val();
                reloadmain();
                hideMe();
            }

            // alert("Data Loaded: " + data);
            //reloadmain();

        })
    //    hideMe();
    }
    function reloadmain() {
        var url = '@Url.Action("_Index", "Bills")' + "?rnd=" + rand();
        $.get(url, function (data) {
            // $('#page').html(data);
            $("#main").html(data);
            //  $("#info").append("<span><i class='icon-info-sign icon-white'></i> Bill Saved</span>");
            $("#info").append("<div class='alert alert-success'><a class='close' data-dismiss='alert'>×</a><strong>" + currentBillName + "</strong> has been successfully saved!</div>");
            $("#info").slideDown("slow");
            $("#info").delay(5000).slideToggle("slow");
        });


    }
function hideMe()
{
    //    $("#popUp").hide("slow");
    $("#backdrop").remove();
    $("#popUp").hide("fast");
    
   // alert($(this).serialize());
}
</script>
